<template>
  <div class="main">
      <Adver></Adver>
      <!-- 内容区 -->
      <div class="content">
        <!-- 内容 -->
        <div class="context">
            <!-- 详细内容 -->
            <div class="detailContent">
                <p style="color:rgb(223, 222, 222);font-size:10px">{{data.node.nodeTime}}</p>
                <p>{{data.node.nodeMess}}</p>
                <div class="img" v-if="data.node.arrImgs.length>=1">
                     

                    <el-image lazy alt="waterghost-头像"  :src="item" v-for="item in data.node.arrImgs" :key="item" style="width:150px;margin-left:10px " :preview-src-list="data.node.arrImgs">
                         <!-- 加载失败插槽 -->
                         <!-- <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div> -->

                    </el-image>
                </div>
                <div class="method">
                   
                    <div class="fx" v-show="fxFlag">
                        <img width="100%" height="100%" :src="eimg">
                    </div>
                    <div class="tag">
                        <Tag v-for="item in data.tag" :key="item" :g="item"></Tag>
                    </div>
                    <div class="dz">
                        <p>
                            <a href="javascript:;" @click="fx" class="el-icon-share"></a>
                            <a href="javascript:;" :class="data.node.collentState?'el-icon-star-off':'el-icon-star-on'" @click="dz"><span style="font-size:10px;">{{data.node.nodeLike==-1?'':data.node.nodeLike}}</span></a>
                         </p>
                    </div>
                </div>
                
                
            </div>
            <!-- 评论 -->
            <div class="comment">
                <div class="message">
                   <textarea  v-model="message" @keydown.enter="sendMess" @keydown="input"></textarea>
                  <p style="text-align:right">  <el-button @click="sendMess" type="warning" size="mini">评论</el-button></p>
                   <p><span>{{length}}</span>/<span>30</span></p>
                </div>
                <div v-if="data.comments==null||data.comments.length<=0" >
                    <el-empty  description="沙发由您来坐"></el-empty>
                </div>
                <div v-else>
                    <p style="text-align:center;color:#dfdede;font-size:10px">评论:<span>({{data.comments.length}})</span></p>
                    <br> <el-divider></el-divider>
                    <div v-for="item in data.comments" :key="item">
                        <span style="color:rgb(223, 222, 222);font-size:10px;margin-left:10px">{{item.comDate}}</span>
                        <UserCord :userId="item.userId" :userHeader="item.userHeader" :userMess="item.comMess" :userName="item.userName"></UserCord>
                        <!-- <hr style="width:98%;margin:0 auto;"> -->
                     <el-divider></el-divider>
                    </div>
                    <LoadAllButton></LoadAllButton>
                </div>
            </div>
        </div>
        <!-- 作者信息 -->
        <div class="autherbox">
            <UserCord :userId="data.userInfo.userId" :userName="data.userInfo.userName" :userHeader="data.userInfo.userHeader" :userMess="data.userInfo.userMess"></UserCord>
            <p>帖子总数:{{data.userInfo.nodeCount}}</p>
            <!-- <p>粉丝总数:{{}}</p> -->
            <p>SV:{{data.userInfo.userSv}}</p>
            <p>SVIP:{{data.userInfo.userVip}}</p>
        </div>
      </div>
  </div>
</template>

<script>

import Adver from "@/components/advertising/advertising"
import UserCord from "@/components/userCord/usercord"
import LoadAllButton from "@/components/button/loadAllButton"
import qs from "qs"
import Tag from "@/components/button/tag"
export default {
    props:["id"],
    components:{Adver,UserCord,LoadAllButton,Tag},
    data(){
        return{
            message:null,
            length:0,
           isMy:false,
           eimg:null,
           fxFlag:false,
            data:{
                node:{
                    arrImgs:null,
                    nodeCount:null,
                    nodeMess:null,
                    nodeTime:null,
                    collentState:null
                },
                tag:[],
                userInfo:{
                    message:null,
                    nodeCount:null,
                    userName:null,
                    userSv:null,
                    userVip:null,
                    userHeader:null,
                },
                 comments:[
                {
                    userName:null,
                    userHeader:null,
                    comMess:null,
                    userId:null,
                    comDate:null,
                }
                ],
            }
        }
    },
    methods:{
        // 收藏作品
        dz(){
            this.data.node.collentState = !this.data.node.collentState
            var state = this.data.node.collentState?-1:1
            this.$http.put("/collent/collentnode/"+this.id+"/"+state).then(va=>{
                if(va!=null){
                    this.$alert(va.data.message)
                    if(va.data.code==200){
                    this.data.node.nodeLike=this.data.node.nodeLike+state
                    }else{
                    this.data.node.collentState=true
                    }
                }
            })
        },
        sendMess(){
            this.$http.post("/com/saveComment",qs.stringify({context:this.message,nodeId:this.id})).then(va=>{
                if(va!=null){
                    if(va.data.code==200){
                        this.$alert(va.data.message)
                        this.data.comments.push(va.data.data)
                    }else{
                        this.$alert(va.data.message)
                    }
                }
            })
        },
        input(e){
            if(this.length > 30 && e.keyCode!=8){
                this.$alert("内容已满")
                return;
            }
                this.length = this.message.length
        },
        fx(){
            this.fxFlag=!this.fxFlag
            if(this.eimg==null){
            this.$http("http://api.tianapi.com/ewm/index?key=38cac4d4a77d17cfa1187e23de59f2ea&text=http://106.55.181.109/detail/"+this.id).then(va=>{
                this.eimg=va.data.newslist[0].text
            })
            }
        },
        initData(){
            this.$http.get("/node/getDetailNode/"+this.id).then((va)=>{
                if(va.data.code==200){
                
                    this.data=va.data.data
                     // 修改主体
                   document.title=this.data.userInfo.userName+"-#"+this.data.tag[0].abName+"-waterghost"
                   
                    // 文章日期格式化
                    var bb = new Date(this.data.node.nodeTime)
                     var datee = bb.getFullYear()+"/"+bb.getMonth()+1+"/"+bb.getDate()+" "+bb.getHours()+":"+bb.getMinutes()+":"+bb.getSeconds()
                    this.data.node.nodeTime=datee
                    for(var i = 0 ; i<this.data.comments.length;i++){
                        // 时间格式化
                        var a = this.data.comments[i].comDate
                        var b = new Date(a)
                        // 进行格式化以及重构
                        var date = b.getFullYear()+"/"+b.getMonth()+1+"/"+b.getDate()+" "+b.getHours()+":"+b.getMinutes()+":"+b.getSeconds()
                        this.data.comments[i].comDate=date;
                    }
                    
                }else{
                    this.$alert(va.data.message)
                }
            })
        }
    },
    created(){
        this.initData();
      
    },
      mounted(){
   document.documentElement.scrollTop=0
  },
}
</script>

<style scoped lang="less">
    .main{
         width: 60%;
        height: auto;
        margin: 10px auto;
        // background: red;
        .content{
            margin-top: 10px;
            width: 100%;
            display: flex;
            height: auto;
            justify-content: space-around;
            // background: pink;
            .context{
                
                // border: 1px solid #e0e0e0;
                width: 75%;
                height: 100%;
                // background: orange;
                .detailContent{
                    width: 100%;
                    height:auto;
                    padding: 10px;
                    border: 1px solid #e0e0e0;
                    .img{
                        margin-top: 10px;
                        width: 650px;
                        height: 100%;
                        img{
                            margin-right: 10px;
                        }
                    }
                    .method{
                        width: 100%;
                        height: 30px;
                        display: flex;
                        position: relative;
                        margin-top: 10px;
                        .tag{
                            display: flex;
                            width: 50%;
                            justify-content: space-around;
                            height: 100%;
                        }
                        .dz{
                            width: 50%;
                            height: 100%;
                            p{
                                font-size: 25px;
                                text-align:right; 
                                a{
                                    color: #ffcd35;
                                }
                            }
                        }
                    }
                }
                .comment{
                    width: 100%;
                    height: auto;
                    margin-top: 10px;
                    border: 1px solid #e0e0e0;
                    .message{
                        width: 100%;
                        height: 100px;
                        padding: 10px;
                        margin-bottom: 10px;
                        textarea{
                            width: 100%;
                            height: 90px;
                            border-radius: 10px;
                            border:none;
                            background: #fddd81;
                            outline: none;
                            padding: 10px;
                            resize: none;
                        }
                        p{
                            text-align: right;   
                        }
                    }
                }
            }
            .autherbox{
                width: 20%;
                height: 100%;
                margin-left:10px;
                // background: orangered;   
                
                border: 1px solid #e0e0e0;
                p{
                    padding: 10px;
                    font-size: 10px;
                    font-family: ht;
                }
            }
        }
    }
     .fx{
        width: 100px;
        height: 100px;
        background: red;
        position:absolute;
        top: -110px;right: 0;
        }
         @media  screen and (max-width: 1300px) {
             .main{
                 width: 100% !important;
                 .content{
                     display: block;
                     .context{
                         width: 100% !important;
                     }
                 }
                 .autherbox{
                     width: 100% !important;
                     margin-left: 0 !important;
                 }
             }
             .img{
                 width:400px !important ;
                img{
                    width: 100px !important;
                }
             }
     }
</style>